<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="//static/css/bootstrap.min.css">
    <link href="//static/plugins/bootstrap-table/bootstrap-table.css" rel="stylesheet">
    <link rel="stylesheet" href="//static/css/public.css">
    <link rel="stylesheet" href="//static/css/font-awesome.min.css">
    <!-- jquery 提示插件css -->
    <link href="//static/plugins/toastr.min.css" rel="stylesheet">
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=1t51luG5BxGrGLW4y9zu3sS6Tz8O3vAG"></script>
    <style>
        .box{
            padding: 20px 10px 30px;
        }
        .nav-box{
            width: 100%;
            height:90vh;
            overflow: auto;
            border: 1px solid #d0d0d0;
            padding: 4px;
        }
        .nav-item{
            width: 100%;
            height: 40px;
            background: #d0d0d0;
            color: #6d6d6d;
            text-align: center;
            line-height: 40px;
            font-size: 14px;
            border-top: 1px solid #e0e0e0;
            cursor: pointer;
        }
        .nav-item:hover,.top-item:hover{
            background: #3c8dbc;
            color: #fff;
        }
        .now{
            background: #3c8dbc!important;
            color: #fff!important;
        }
        .box-top{
            width: 100%;
            height: 60px;
            border-bottom: 1px solid #ccc;
        }
        .top-item{
            padding: 0px 30px;
            float: left;
            background: #d0d0d0;
            color: #6d6d6d;
            text-align: center;
            line-height: 40px;
            font-size: 14px;
            border-right: 1px solid #e0e0e0;
            cursor: pointer;
        }
        .add{
            height: 40px;
            border-radius: 3px;
            border: 1px solid #d0d0d0;
            background: none;
        }
        .add:hover{
            background: #113757;
            color: #fff;
        }
        #allmap,#map{
            height: 100%;
            width: 100%;
        }

        .manage-title{
            float: left;
            width: 70px;
            height:28px;
            line-height: 28px;
            font-weight: bold;
            text-align: right;
        }
        .form-manage{
            float: left;
            width: 71%;
        }
        .form-group{
            overflow: hidden;
        }
        .bomb-box{
            width: 100%;
            height: 257px;
        }
        .modal-manage{
            padding: 10px;
            overflow: hidden;
        }

        /*地图设备弹出框*/
        .dong-box{
            position: absolute;
            top: 18%;
            right: -450px;
            z-index: 100;
            width: 450px;
            background-color: #fff;
            transition: all 0.5s;
        }
        .equipment-box {
            position: relative;
            width: 450px;
        }
        .equipment-content{
            height: 400px;
            width: 470px;
            overflow: auto;
        }

        .equipment-title {
            color: #333;
            background-color: #f5f5f5;
            height: 50px;
            line-height: 50px;
            text-align: center;
            transition: width 0.5s;
        }

        .equipment-title-img{
            position: absolute;
            width: 35px;
            height: 50px;
            line-height: 59px;
            background-color: #fff;
            left: -34px;
            top: 216px;
            text-align: center;
            cursor: pointer;
        }
        .equipment-table {
            height: 35px;
            line-height: 35px;
            text-align: center;
            font-size: 14px;
        }

        .equipment-table-header {
            background-color: #3c8dbc;
            color: #fff;
        }
        .btn-primary2 {
            background-color: #1ab394;
            border-color: #1ab394;
            color: #FFFFFF;
        }
        .btn-primary2:hover {
            background-color: #18a689;
            border-color: #18a689;
            color: #FFFFFF;
        }
        .form-control{
            background-color: #FFFFFF;
            background-image: none;
            border: 1px solid #e0e0e0;
            border-radius: 1px;
            color: inherit;
            display: block;
            padding: 6px 12px;
        }
    </style>
</head>
<body>
<div id="box" class="box">
    <div class="col-xs-2">
        <div class="nav-box">
            <div class="nav-item" v-for="(item) in list">{{item.name}}</div>
        </div>
    </div>
    <div class="col-xs-10">
        <div class="border-all" style="width: 100%;height:90vh;">
            <div class="box-top" style="position: relative;">
                <div style="position: absolute;left: 10px;bottom: 1px;" id="tab">
                    <div class="top-item now">
                        表格
                    </div>
                    <div class="top-item">
                        地图
                    </div>
                </div>
                <button class="btn pull-right add" style="margin-top: 15px;margin-right: 20px" onclick="add()">添加</button>
            </div>
            <div class="tab-content" style="width: 100%;height: 658px;overflow: hidden;">
                <div id="tap1" style="margin: 10px;height: 100%;overflow-y: auto;">
                    <table id="table"
                           data-toggle="table"
                           data-toolbar=".toolbar"
                           data-pagination="true"
                           data-maintain-selected="true"
                           data-search="true"
                           data-search-align="left">
                        <thead>
                        <tr>
                            <th data-field="name">名称</th>
                            <th data-field="no">简称</th>
                            <th data-field="step">编号</th>
                            <th data-field="type">类型</th>
                            <th data-field="long" data-align="center">经度</th>
                            <th data-field="lat">纬度</th>
                            <th data-align="center" data-formatter="operateFormatter" data-events="actionEvents">操作</th>
                        </tr>
                        </thead>
                    </table>
                </div>
                <div id="tap2" style="width: 100%;height: 100%;position: relative;display: none;overflow: hidden;">
                    <div id="allmap"></div>
                    <!--设备弹出框-->
                    <div id="equipmentMap" class="dong-box">
                        <div class="equipment-box border-all">
                            <div class="equipment-title border-bottom">
                                设备信息
                            </div>
                            <!--头部-->
                            <div class="float-clear border-bottom equipment-table-header">
                                <div class="float-left equipment-table border-right" style="width: 100px;">
                                    <span>设备名称</span>
                                </div>
                                <div class="float-left equipment-table border-right" style="width: 70px;">
                                    <span>编号</span>
                                </div>
                                <div class="float-left equipment-table border-right" style="width: 50px;">
                                    <span>位置</span>
                                </div>
                                <div class="float-left equipment-table border-right" style="width: 50px;">
                                    <span>状态</span>
                                </div>
                                <div class="float-left equipment-table border-right" style="width: 100px;">
                                    <span>启动时间</span>
                                </div>
                                <div class="float-left equipment-table" style="width: 75px;">
                                    <span>运行天数</span>
                                </div>
                            </div>
                            <!--循环结构-->
                            <div class="equipment-content">
                                <div class="float-clear border-bottom" v-for="(item,index) in personalList"  :class="{ personalActive: item.isActive }">
                                    <div class="float-left equipment-table border-right" style="width: 100px;">
                                        <span>{{item.userName}}</span>
                                    </div>
                                    <div class="float-left equipment-table border-right" style="width: 70px;">
                                        <span>{{item.no}}</span>
                                    </div>
                                    <div class="float-left equipment-table border-right" style="width: 50px;cursor: pointer;" @click="jumpUserMarker(item,index)">
                                        <img src="//static/image/location.png" style="width: 20px;margin-top: 8px;">
                                    </div>
                                    <div class="float-left equipment-table border-right" style="width: 50px;">
                                        <span>{{item.step}}</span>
                                    </div>
                                    <div class="float-left equipment-table border-right" style="width: 100px;">
                                        <span>{{item.start_time}}</span>
                                    </div>
                                    <div class="float-left equipment-table" style="width: 75px;">
                                        <span>{{item.day}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="equipment-title-img border-left border-bottom border-top" @click="boxToggle()">
                            <span class="fa" style="font-size: 30px;">&#xf104;</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="modal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">{{titleType}}</h4>
                </div>
                <div class="modal-manage">
                    <div class="col-xs-6">
                        <div class="bomb-box" style="margin-top: 6px">
                            <div class="form-group col-xs-12">
                                <div class="manage-title">
                                    <span>名称：</span>
                                </div>
                                <input type="text" class="form-control form-manage" v-model="modalData.name">
                            </div>
                            <div class="form-group col-xs-12">
                                <div class="manage-title">
                                    <span>简称：</span>
                                </div>
                                <input type="text" class="form-control form-manage" v-model="modalData.no">
                            </div>
                            <div class="form-group col-xs-12">
                                <div class="manage-title">
                                    <span>编号：</span>
                                </div>
                                <input type="text" class="form-control form-manage" v-model="modalData.step">
                            </div>
                            <div class="form-group col-xs-12">
                                <div class="manage-title">
                                    <span>类型：</span>
                                </div>
                                <input type="text" class="form-control form-manage" v-model="modalData.type">
                            </div>
                            <div class="form-group col-xs-12">
                                <div class="manage-title">
                                    <span>经度：</span>
                                </div>
                                <input id="lng" type="text" class="form-control form-manage" v-model="modalData.long">
                            </div>
                            <div class="form-group col-xs-12">
                                <div class="manage-title">
                                    <span>纬度：</span>
                                </div>
                                <input id="lat" type="text" class="form-control form-manage" v-model="modalData.lat">
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-6">
                        <div class="bomb-box">
                            <div id="map"></div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary2 submit" onclick="okClick()">确认</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <!--删除 类型 模态-->
    <div id="deleteCategoryModal" class="modal fade">
        <div class="modal-dialog" style="width: 400px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">创客提示</h4>
                </div>
                <div class="modal-manage">
                    <h3 class="text-center">是否删除当前类型</h3>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary2 submit" onclick="delTable()">确认</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
</div>
<!-- 主要的脚本 -->
<script src="//static/js/jquery-3.1.1.min.js"></script>
<script src="//static/js/vue.min.js"></script>
<script src="//static/js/bootstrap.min.js"></script>
<script src="//static/js/publicServe.js"></script>
<script src="//static/plugins/bootstrap-table/bootstrap-table.js"></script>
<script src="//static/plugins/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
<script src="//static/js/vue.min.js"></script>
<script src="//static/plugins/toastr/toastr.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#box',
        data: {
            oldIndex:0,
            now: false,
            personalList: [
                {
                    userName: '古县1号泵组',
                    no: '0001',
                    point: {
                        long: 112.607,   //经度
                        lat: 37.803      //纬度
                    },
                    personalMarker: null,
                    content: "当前任务:设备维修",
                    isActive:false,
                    step:'正常',
                    startTime:'2018-3-15',
                    day:230
                },
                {
                    userName: '古县2号泵组',
                    no: '0002',
                    point: {
                        long: 112.580,   //经度
                        lat: 37.800      //纬度
                    },
                    personalMarker: null,
                    content: "当前任务:设备维修",
                    isActive:false,
                    step:'正常',
                    startTime:'2018-3-18',
                    day:120
                }
            ],
            modalType:'添加',                   //模态框修改的类型 添加|编辑
            titleType:'',                   //模态框title的类型 添加|编辑
            list:[
                {
                    name:'水厂',
                    link:'https://www.cnblogs.com/rlann/p/7457601.html'
                },{
                    name:'加压站'
                }
            ],
            modalData:{
                name:'',
                no:'',
                step:'',
                type:'',
                long:'',
                lat:'',
            }
        },
        methods:{

        },
        created: function () {

        }
    });
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(112.591405,37.80682), 15);
    map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
    map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
    // 弹框百度地图API功能
    var map2 = new BMap.Map("map");
    map2.centerAndZoom(new BMap.Point(112.607, 37.803), 15);
    map2.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
    map2.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
    map2.setDefaultCursor("default");

    //单击获取点击的经纬度
    map2.addEventListener("click",function(e){
        var lngIpt = document.getElementById("lng");
        var latIpt = document.getElementById("lat");
        lngIpt.value=e.point.lng;
        latIpt.value=e.point.lat;
    });
    var $table = $('#table');
    // $table.bootstrapTable({
    //     pageSize: 20
    // }
    var list = [];
    for(var i=1;i<20;i++){
        list.push({
            id:i,
            name:'古县'+i+'号泵组',
            no:'0'+i,
            step:'正常',
            type:'建筑',
            long: 112.607,   //经度
            lat: 37.803      //纬度
        });
    }
    //获取table信息 并且绘制
    function tableList() {
        $table.bootstrapTable('load', list);
    }
        // 确认删除
    function delTable() {
        $("#deleteCategoryModal").modal('hide');
    }
    // 添加信息
    function okClick() {
        var newModalData = Object.assign({},vm.modalData);
        if(vm.modalType=="添加"){
            list.push(newModalData);
            $("#modal").modal('hide');
        }else{
            $("#modal").modal('hide');
        }
    }
    //dom渲染完成后加载
    $(document).ready(function () {
        //获取table信息 并且绘制
        tableList();
    });
    // 添加信息
    function add() {
        //清空 vm.modalData 中的值
        vm.modalData = {name:'',no:'',step:'',type:'',long:'',lat:''};
        vm.modalType = "添加";
        vm.titleType = "添加信息";
        //将模态中的数据深度克隆一份 防止旧值被修改
        $('#modal').modal('show');
    }
    //为主体中的列表添加按钮
    function operateFormatter(value, row, index) {
        return [
            '<button type="button" class="RoleOfedit table-btn btn-primary2">编辑</button>',
            '<button type="button" class="RoleOfdelete btn-primary2 table-btn">删除</button>',
        ].join('');
    }
    //为按钮列表添加事件
    window.actionEvents = {
        //添加编辑事件
        'click .RoleOfedit': function (e, value, row, index) {
            //将当前行的属性添加给 dictionaryData 供模态框绑定
            vm.modalData = row;
            vm.modalType = "编辑";
            vm.titleType = "编辑信息";
            $("#modal").modal('show');
        },
        //添加删除事件
        'click .RoleOfdelete': function (e, value, row, index) {
            //将当前行的属性添加给 dictionaryData 供模态框绑定
            vm.modalData = row;
            $("#deleteCategoryModal").modal('show');
        }
    };
    //添加每个用户所在点的标注
    function addUserMarker() {
        for (var i = 0; i < vm.personalList.length; i++) {
            var point = new BMap.Point(vm.personalList[i].point.long, vm.personalList[i].point.lat);
            var icon = new BMap.Icon("equipment.png",new BMap.Size(30,30),{anchor: new BMap.Size(7,10)});
            var mkr = new BMap.Marker(point, { icon: icon});//创建标注
            vm.personalList[i].personalMarker = mkr;
            map.addOverlay(mkr);//将标注添加到地图上
            addClickHandler(vm.personalList[i], mkr); //添加事件监听
        }
    }

    //标注点事件监听
    function addClickHandler(item, marker) {
        marker.addEventListener("click", function (e) {
            openInfo(item, e);//点击打开标注点信息窗口
        });
    }

    //点击打开标注点信息窗口
    function openInfo(item, e) {
        var long;
        var lat;
        var point;
        var sContent =
            `
                <div class="infoWindow-box">
                    <div class="infoWindow-title">
                        <span>${item.userName}</span>
                        <a class="float-right infoWindow-a" href="equipmentDetail.html">查看详情 ></a>
                    </div>
                    <div class="float-clear">
                        <img src="//static/image/pumpImg.jpg" class="float-left infoWindow-img">
                        <div class="float-left">
                            <div class="infoWindow-detail">运行状态：开</div>
                            <div class="infoWindow-detail">运行时间：${item.day}天</div>
                            <div class="infoWindow-detail">设备状态：${item.step}</div>
                            <div class="infoWindow-detail">设备编号：${item.no}</div>
                        </div>
                    </div>
                </div>
                `;
        var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象
        if (e) {
            long = e.target.getPosition().lng;
            lat = e.target.getPosition().lat
        } else {
            long = item.point.long;
            lat = item.point.lat;
        }
        point = new BMap.Point(long, lat);
        map.openInfoWindow(infoWindow, point); //开启信息窗口
        //图片加载完毕重绘infowindow
        document.getElementsByClassName('infoWindow-img').onload = function (){
            infoWindow.redraw();   //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
        };
        map.panTo(point);                       //将地图中心移动到当前选择点位
    }

    //点击定位指定到当前用户的标注点 打开信息框
    function jumpUserMarker(item,index) {
        personalActive(index);//选择在线人员列表样式
        map.clearOverlays();  //清除地图覆盖物
        addUserMarker();      //将点位重新标注出来
        openInfo(item, null);//点击打开标注点信息窗口
    }

    //点击改变在线人员列表状态
    function personalActive(index) {
        vm.personalList[vm.oldIndex].isActive = false;
        vm.oldIndex = index;
        vm.personalList[index].isActive = true;
    }

    //添加每个用户所在点的标注
    addUserMarker();

    //点击收回信息盒子
    var equipment = document.getElementById("equipmentMap");
    var isHide = false;
    function boxToggle() {
        equipment.style.right = isHide?"-450px":'0px';
        isHide = !isHide;
    }
    // tab切换
    $('#tab>div').click(function () {
        $(this).addClass('now').siblings().removeClass('now');
        var index = $(this).index();
        $('.tab-content>div').eq(index).fadeIn(300).siblings().fadeOut(10)
    });
    // 左侧点击
    var $nav=$('.nav-box>div');
    $nav.eq(0).addClass('now');
    $nav.click(function () {
        $(this).addClass('now').siblings().removeClass('now')
    });
    //弹出框提示配置
    toastr.options = {
        "closeButton": true,
        "debug": false,
        "progressBar": true,
        "preventDuplicates": false,
        "positionClass": "toast-bottom-right",
        "onclick": null,
        "showDuration": "400",
        "hideDuration": "1000",
        "timeOut": "2000",
        "extendedTimeOut": "1000",
        "showEasing": "swing",
        "hideEasing": "linear",
        "showMethod": "fadeIn",
        "hideMethod": "fadeOut"
    };
</script>
</body>
</html>